<template>
	<div class="page1">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/" class="left" style="line-height: 20px;">
				<el-breadcrumb-item>停车场查询</el-breadcrumb-item>
				<el-breadcrumb-item>停车场总查询</el-breadcrumb-item>
			</el-breadcrumb>
			<el-button class="right" style="width: 88px; height: 36px; margin-top: -10px;" @click="$router.go(-1)">返回</el-button>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--基本信息-->
			<div class="detailWrapper">
				<h2 class="title">
					<div class="title_icon">						
					</div>
					停车场列表
				</h2>
				<div class="">
					<el-row :gutter="20">
					  <el-col :span="12">
					  <InfoList :infoData="infoData" :infoDetail="infoDetail" :infoSize="infoSize"></InfoList>					  
					  </el-col>
					  <el-col :span="6" :offset="6">
					  	<div class="detail_pic">
					  		<div class="info_pic">
						  		<img :src="infoDetail.image" width="177" height="240"/>
						  	</div>
						  	<div class="pic_title">
						  		<div class="icon-circle"></div>
						  		停车场图片
						  	</div>
					  	</div>					  	
					  </el-col>
					</el-row>
				</div>
			</div>
			<!--列表区域-->
			<div class="tableWrapper" v-show="isPublic">
				<h2 class="title">
					<div class="title_icon">						
					</div>
					收费规则
				</h2>
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="200">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop" :formatter="item.formatter"></el-table-column>
					<!--<el-table-column label="操作" width="70">
						<template scope="scope">
							<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>
						</template>-->
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getData
	} from '../../common/js/public.js'
	import InfoList from '../../components/infoList/infoList'
	export default {
		name: 'hello',
		data () {
			return {
				pageSize: 15,
				pageNum: 1,
				loading: false,
				isPublic: false,
				tableCols: [{
					prop: 'carType',
					label: '车辆类型',
					width: '',
					formatter: (row) => {
						if (row.carType == 0) {
							return '小型车';
						} else if (row.carType == 1) {
							return '中型车';
						} else if (row.carType == 2) {
							return '大型车';
						}
					}
				}, {
					prop: 'chargeType',
					label: '费率类型',
					width: '',
					formatter: (row) => {
						if (row.chargeType == 0) {
							return '云端标准';
						} else if (row.chargeType == 1) {
							return '停车场管理系统';
						}
					}
				}, {
					prop: 'refChargeName',
					label: '规则名称',
					width: ''
				}, {
					prop: 'refChargeCode',
					label: '规则编码',
					width: ''
				}, {
					prop: 'effectiveTime',
					label: '生效日期',
					width: '200'
				}, {
					prop: 'disWorkday',
					label: '是否设置工作日费率',
					width: '',
					formatter: (row) => {
						if (row.disWorkday == 0) {
							return '否';
						} else if (row.disWorkday == 1) {
							return '是';
						}
					}
				}, {
					prop: 'disHoliday',
					label: '是否设置节假日费率',
					width: '',
					formatter: (row) => {
						if (row.disHoliday == 0) {
							return '否';
						} else if (row.disHoliday == 1) {
							return '是';
						}
					}
				}],
				tableData: [],
				infoSize: 10,
				infoData: [{
					label: '停车场名称',
					value: 'parkName'
				}, {
					label: '运营类型',
					value: 'isPartner',
					formatter: (row) => {
						if (row == 0) {
							return "自营";
						} else if (row == 1) {
							return "合作";
						} else if (row == 2) {
							return "其它";
						}
					}
				}, {
					label: '系统编码',
					value: 'showCode'
				}, {
					label: '运营状态',
					value: 'operateState',
					formatter: (row) => {
						if (row == "0") {
							return "试用";
						} else if (row == "1") {
							return "商用";
						}
					}
				}, {
					label: '停车场类型',
					value: 'rsType',
					formatter: (row) => {
						if (row == 0) {
							return "开放";
						} else if (row == 1) {
							return "封闭";
						} else if (row == 2) {
							return "半封闭";
						} else if (row == 3) {
							return "垂停";
						} else if (row == 4) {
							return "混合";
						} else if (row == 5) {
							return "PDA";
						}
					}
				}, {
					label: '是否收费',
					value: 'isFree',
					formatter: (row) => {
						if (row == 0) {
							return '收费';
						} else if (row == 1) {
							return '免费';
						}
					}
				}, {
					label: '收费类型',
					value: 'type',
					formatter: (row) => {
						if (row == 1) {
							return '小时';
						} else {
							return '次';
						}
					}
				}, {
					label: '总车位数',
					value: 'totalSpace'
				}, {
					label: '所在区域',
					value: 'cityName'
				}, {
					label: '地址',
					value: 'address'
				}, {
					label: '开放时间',
					value: 'startTime'
				}, {
					label: '关闭时间',
					value: 'endTime'
				}, {
					label: '启用时间',
					value: 'activityDate'
				}],
				infoDetail: {}
			}
		},
		methods: {			
			queryDetail (obj) {
				this.loading = true;
				let opt = {
					url: '/gplus/park/queryById',
					data: {
						parkId: obj.parkId
					},
					success: (res) => {
						this.infoDetail = res.data.ParkVO;
						if (this.infoDetail.busiType == 1) {
							this.isPublic = true;
							this.tableData = res.data.ChargeParkList;	
						}
						this.loading = false;
					}
				};
				getData(opt);
			}
		},
		components: {	
			InfoList
		},
		mounted () {
			console.log(this.$route.query)
			this.queryDetail(this.$route.query);
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 20px;
	margin-bottom: 20px;	
.content	
	background: #FFFFFF;
	border: 1px solid #C0CCDA;
	border-radius: 4px;
	padding: 20px;
	overflow: hidden;
	.detail_pic		
		text-align: center;
		.pic_title
			font-size: 12px;
			color: #475669;
			height: 20px;
			line-height: 20px;
			.icon-circle
				display: inline-block;
				width: 6px;
				height: 6px;
				background: #0099FA;
				border-radius: 50%;
				margin-right: 5px;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
</style>
